<?
	$activity = isset($data) ? $data['Activity'] : array();
	
	$selected_members = Set::combine($data['Member'], '{n}.id', array('{0} {1}', '{n}.firstname', '{n}.surname'));
	
	$tmp = array();
	foreach($conductors as $c) {
		$tmp[$c['Member']['id']] = $c['Member']['firstname'] . " " . $c['Member']['surname'] . " - " . __($c['Function']['name']);
	}
	$conductors = $tmp;
?>

<?= $this->element('back') ?>
<? if((int)@$activity['id']>0): ?>
	<h1><?= strtotitle(__('edit')) ?> <?= __('of activity') ?></h1>
<? else: ?>
	<h1><?= strtotitle(__('new activity')) ?></h1>
<? endif; ?>

<?= $this->Form->create('Activity', array('action'=>'save')) ?>
	<?= $this->App->input('id', 'hidden', $activity['id']) ?>
	
	<?= $this->App->input('date', 'date', $activity['date']) ?>
	
	<br clear="all">
	<div class="left span40p">
		<?= $this->App->input('type', 'select', $activity['type'], array(
			'options_raw' => true,
			'options' => array(
				'Rehearsal' => __('Rehearsal'),
				'Liturgy' => __('Liturgy'),
				'Rite' => __('Rite')
			)
		)) ?>
		
		<?= $this->App->input('category', 'select', $activity['category'], array('options' => array('juniors','seniors'))) ?>
	</div>
	
	<div class="left span40p">
		<?= $this->Form->label('conductor_member_id', strtotitle(__('conductor')).":") ?>
		<?= $this->Form->select('conductor_member_id', $conductors, array('value'=>$activity['conductor_member_id'], 'empty'=>false)) ?>
		
		<?= $this->App->input('choir', 'select', $activity['choir'], array('options' => array('male','female','mixed'))) ?>
	</div>
	<br clear="all">
	<fieldset id="all-members" class="left span40p drag-drop-set" style="margin-right:10px;">
		<legend><?= __('all members') ?> (<span></span>)</legend>
		
		<input type="text" class="autocomplete" placeholder="<?= __('Search') ?>...">
		<ul class="drag-drop">
			<? foreach($all_members as $member): ?>
				<? if(!isset($selected_members[$member['Member']['id']])): ?>
				<li>
					<input type="hidden" name="AllMembers[]" value="<?= $member['Member']['id'] ?>" />
					<?= $member['Member']['firstname'] ?> <?= $member['Member']['surname'] ?>
				</li>
				<? endif; ?>
			<? endforeach; ?>
		</ul>
		
	</fieldset>
	<fieldset id="selected-members" class="left span40p drag-drop-set">
		<legend><?= __('selected members') ?> (<span></span>)</legend>
		
		<input type="text" class="autocomplete" placeholder="<?= __('Search') ?>...">
		<ul class="drag-drop">
			<? if(isset($data['Member'])): ?>
				<? foreach($data['Member'] as $id=>$member): ?>
				<? if(is_int($id) > 0): ?>
				<li>
					<input type="hidden" name="data[Member][]" value="<?= $member['id'] ?>" />
					<?= $member['firstname'] ?> <?= $member['surname'] ?>
				</li>
				<? endif; ?>
				<? endforeach; ?>
			<? endif; ?>
		</ul>
		
	</fieldset>

	<br clear="all">
<?= $this->Form->end(strtotitle(__('save'))) ?>
<br clear="all">
<script type="text/javascript">
	$(function(){
		$('.drag-drop li').draggable({
			appendTo: $('body'),
			revert: 'invalid',
			helper:'clone'
		});
		$('.drag-drop').droppable({
			drop: function(e,ui) {
				el = ui.draggable;
				el.css({left:0,top:0});
				
				var fieldset = $(this).parent();
				if(fieldset.attr('id') == "all-members"){					
					el.find("input[type=hidden]").attr('name', "AllMembers[]")
				}else{
					el.find("input[type=hidden]").attr('name', "data[Member][]")
				}
				$(this).append(el);
				
				updateCounters();
			}
		});

		$('.autocomplete').each(function(){
			$(this).data('ul', $(this).next());
			$(this).wrap('<div class="autocomplete-container" />');
			var btnClear = $('<a href="javascript:void(0)" class="clear">x</a>');
			btnClear.click(function(){
				var inpt = $(this).parent().children('input.autocomplete').eq(0);
				var ul = inpt.data('ul');
				$(this).hide();
				ul.find('li').show();
				inpt.val('');
			});
			$(this).after(btnClear);
			$(this).keydown(function(){
				var to = $(this).data("timeout");
				if(to){
					clearTimeout(to);
				}
			});
			$(this).keyup(function(){
				var _this=$(this);
				$(this).data("timeout", setTimeout(function(){
					var kword = _this.val().trim().toLowerCase();
					var ul = _this.data('ul');
					var clear = _this.parent().find(".clear");
					if(kword.length>0){
						clear.show();
						ul.find('li').each(function(){
							if($(this).text().trim().toLowerCase().indexOf(kword) >= 0) {
								$(this).show();
							}else{
								$(this).hide();
							}
						});
					}else{
						clear.hide();
						ul.find('li').show();
					}
				}, 600));
			});
		});
	});
	
	function updateCounters(){
		$('#all-members legend span').html($('#all-members li').length);
		$('#selected-members legend span').html($('#selected-members li').length);
	}
	updateCounters();
</script>
